import { t } from 'i18next'
import { forwardRef, useState } from 'react'
import { Button, Input, Modal, Radio } from '@kedacom/react-next'
import { CommonCard } from './common'
import { useStore as useMeetingScheduleStore } from '../../store'
import shallow from 'zustand/shallow'
import { ConflictDialogWrap, StyledRejectMeetingWrap, WrapFooter } from '../style'
import { MeetingEntity } from '../../interface'
import { useGlobalStore } from '@/store/global'
import Alert from '@/components/Alert'

const ConflictDialog = forwardRef((props: any, ref: React.Ref<null>) => {
	const { conflict_list, isValidLink, update } = useMeetingScheduleStore(
		(state) => ({
			conflict_list: state.conflict_list,
			isValidLink: state.isValidLink,
			update: state.update,
		}),
		shallow
	)
	const [is_show_not_participate_modal, setIsShowNotParticipateModal] = useState(false) // 弹框显示
	const [not_participate_value, setNotParticipateValue] = useState(1) // 不参加会议选择按钮值
	const [not_participate_resason, setNotParticipateReason] = useState('') // 不参加会议的原因
	const [seletItem, setSelectItem] = useState<MeetingEntity | null>(null)
	const handleConfirmNotParticipate = () => {
		if (!seletItem) return
		const { meeting_id, video, last_modify_time, isRegularMeeting } = seletItem
		let person_attend_info = {
			meetingMoid: meeting_id,
			isVideoMeeting: video,
			isParticipated: 0,
			participatedType: '',
			participatedNO: '',
			reasonId: '',
		}
		if (not_participate_value === 0) {
			if (not_participate_resason.trim().length === 0) {
				return false
			}
			update({
				attending_info: { ...person_attend_info, ...{ reasonId: 0, reasonDesc: not_participate_resason } },
			})
		} else {
			update({
				attending_info: { ...person_attend_info, ...{ reasonId: 1, reasonDesc: t('会议时间冲突') } },
			})
		}
		/**是否例会(审批列表中显示例会样式，其余以普通会议显示)*/
		const is_regular_meeting = isRegularMeeting
		isValidLink(
			{
				last_modify_time: last_modify_time,
				meeting_moid: meeting_id,
				is_regular_meeting: is_regular_meeting,
			},
			function () {
				setIsShowNotParticipateModal(false)
				update({ is_show_conflict_meeting_modal: false })
			}
		)
	}
	return (
		<>
			<ConflictDialogWrap>
				<div className="conflict_list">
					{conflict_list.map((item, index) => {
						return (
							<div className="conflict_lis_item" key={item.meeting_id}>
								<CommonCard
									entity={item}
									orderArr={[index, conflict_list.length]}
									is_show_share={false}
									is_show_vcs={false}
									is_show_edit={false}
									is_show_e164={false}
									is_show_domain_name={false}
									is_upload_file={true}
									file_num={item.file_num ?? 0}
									is_conflict_modal={true}
								></CommonCard>
								<WrapFooter className="meeting-card-footer">
									<div className="meeting_card_manager_option">
										<Button
											className="btn"
											onClick={() => {
												const user = useGlobalStore.getState().user
												if (!user?.enable_meeting) {
													Alert(t('无会议管理权限，请通知管理员'))
													return false
												}
												setIsShowNotParticipateModal(true)
												setSelectItem(item)
											}}
										>
											{t('不参加')}
										</Button>
									</div>
								</WrapFooter>
							</div>
						)
					})}
				</div>
			</ConflictDialogWrap>
			<Modal
				open={is_show_not_participate_modal}
				title={t('不参加原因')}
				width={400}
				height={260}
				onOk={() => {
					handleConfirmNotParticipate()
				}}
				onCancel={() => {
					setIsShowNotParticipateModal(false)
				}}
				okText={t('确定')}
				cancelText={t('取消')}
			>
				<StyledRejectMeetingWrap>
					<div className="content">
						<div className="content_line">
							<Radio
								checked={not_participate_value === 1}
								onChange={(e, v) => {
									setNotParticipateValue(1)
								}}
								width={155}
								height={22}
							>
								{t('会议时间冲突')}
							</Radio>
						</div>
						<div className="content_line">
							<Radio
								checked={not_participate_value === 0}
								onChange={(e, v) => {
									setNotParticipateValue(0)
								}}
								width={105}
								height={22}
							>
								{t('其他')}
							</Radio>
							{not_participate_value === 0 && (
								<Input
									className="input_msg"
									width={180}
									value={not_participate_resason}
									placeholder=""
									focusMsg={t('请输入不参加会议的原因')}
									rule={{
										required: {
											showIcon: false,
											msg: t('不参加会议原因不能为空'),
										},
									}}
									onChange={(e, v) => {
										setNotParticipateReason(v)
									}}
								/>
							)}
						</div>
					</div>
				</StyledRejectMeetingWrap>
			</Modal>
		</>
	)
})
export default ConflictDialog
